<template>
	<!-- 知识图谱页面 -->
	<view>
		<view class="flex benben-position-layout flex flex-wrap align-center mance_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between flex-sub mance_fd0_0'>
				<view class='flex flex-wrap align-center mance_fd0_0_c0'>
					<text class='fu-iconfont2  mance_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='mance_fd0_0_c1_c0'>{{name}}</text>
				</view>
				<view class='flex flex-wrap align-center justify-end mance_fd0_0_c0'>
				</view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!-- 知识图谱 -->
		<view :style="{ height: `calc(100vh - 88rpx - 88rpx - ${StatusBarRpx}rpx - var(--window-bottom))` }"
			class='flex flex-wrap align-center coursePro-tupu'>
			<div class="total" v-if="group==1">
				<span style="font-size:26rpx;margin-left: 24rpx;">知识点进度：</span>
				<span style="font-size:32rpx; color: #3771FB;font-weight:bold;">{{numObj.jindu}}</span>
				<span style="font-size:26rpx;">/{{num }}</span>

				<view class='flex flex-wrap align-center'>
					<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
						<view class='benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0'
							:style="{width: ((num > 0 ? numObj.jindu / num : 0) * 100).toFixed(1)+'%'}">
						</view>
					</view>
					<view class="number">
						{{ ((num > 0 ? numObj.jindu / num : 0) * 100).toFixed(1) }}%
					</view>
				</view>
			</div>
			<view class="all" v-else>
				知识点总数：<text style="color: #145EFD;">{{num}}</text>
			</view>
			<!-- <view class='flex flex-wrap align-center justify-between flex-sub searchs_fd0_0_ben'>
				<view class='flex flex-wrap align-center flex-sub searchs_fd0_0_c1_ben'>
					<image class='searchs_fd0_0_c1_c0_ben' mode="aspectFit" :src='STATIC_URL+"serse.png"'>
					</image>
					<benben-input class='flex-sub searchs_fd0_0_c1_c1_ben' type="text"
						:placeholder="$t('搜索')" confirm-type="done" :maxlength="-1"
						placeholder-style="color:#999;font-size:28rpx" @confirm="addSearchHistoryFunc()"
						v-model="KeyWord" />
				</view>
			</view> -->
<!-- 			<view class="flex benben-flex-layout flex-wrap align-center jdt">
				<benben-progress-slider class='lx_fd4_0_ibhf ' v-model="jd" direction="horizontal" :show-buttons='true'
					:step="20" :min="0" :max="100" :track-height="16">
			
					<template #thumb>
						<view class='flex flex-wrap align-center'>
							<image class='lx_fd4_0_c0_c0_ibhf' mode="aspectFit" :src='STATIC_URL+"stcimg/3.png"'>
							</image>
						</view>
					</template><template #minus>
						<view class='flex flex-wrap align-center'>
							<text class='fu-iconfont2  lx_fd4_0_c1_c0_ibhf'>&#xe680;</text>
						</view>
					</template><template #plus>
						<view class='flex flex-wrap align-center'>
							<text class='fu-iconfont2  lx_fd4_0_c1_c0_ibhf'>&#xe736;</text>
						</view>
					</template>
				</benben-progress-slider>
			
			</view> -->
			<MyComponent  :course="course" :jd="jd" @myEvent="handleChildData" :name='name'></MyComponent>
			

		</view>
	</view>
</template>

<script>
	import MyComponent from "./MyComponent.vue";
	export default {
		components: {
			MyComponent,
			// chartList,
			// ExperimentList
		},
		data() {
			return {
				group:0,//1学生 2教师
				jd: 80, //缩放大小
				"numObj": {}, //谱图进度
				"course": "1",
				name:'',//课程名称
				num:'',//知识点数量
				"list": {
					"name": "",
					"cover": "",
					"textbook_name": "",
					"course_details": "",
					"course_objectives": "",
					"teacher": "",
					"academic_year": "",
					"basemajor_name": "",
					"semester": "",
					"class_period": "",
					"duration_schedule": "",
					"aid": ""
				},
			}
		},
		onLoad(options) {
			let {
				course
			} = options
			if (course !== undefined) this.course = course
			this.name=options.name
			this.num=options.num
			this.getjf6f236d491017Func()
			// this.getld6f25aec6e2a9Func()


			// this.get_course_chapterApi() //判断有没有课程实验，没有就隐藏
		},
		onShow() {
			this.group=uni.getStorageSync('USER_GROUP');
		},
		methods: {
			//APP接口-查看课程详情
			async getjf6f236d491017Func() {
				//请求方法
				//数据验证
				let url=''
				if (uni.getStorageSync('USER_GROUP') == 1) {
					url = global.apiUrls.post68ca2decb8b2c
				} else {
					url = global.apiUrls.post68c3989022b95
				}
				let datalist = await this.$api.get(url, {
					aid: this.course
				});
				this.isup=true
				if (datalist.data.code != 1) {
					this.$message.info(datalist.data.msg);
					return
				}
				let infolist = datalist.data;
				this.list = infolist.data

			},
			// 知识图谱
			handleChildData(data) {
				this.numObj = data
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.jdt {
		width: 100%;
		background-color: #F4F8FD;
		height: 100rpx;
	}

	.lx_fd4_0_ibhf {
		width: 750rpx;
		height: 36rpx;
		padding: 0rpx 30rpx 0rpx 30rpx;
		--track-bg: #ff6600;
		--track-wrapper-bg: #ccc;

		.lx_fd4_0_c0_c0_ibhf {
			width: 36rpx;
			height: 36rpx;
			border-radius: 0rpx;
		}
	}

	.lx_fd4_0_c1_c0_ibhf {
		color: var(--benbenFontColor2);
	}

	.coursePro-tupu {
		overflow: hidden;
		padding: 0 24rpx 0 24rpx;
		display: flex;
		flex-direction: column;

		.total {
			width: 100%;
			height: 88rpx;
			background: #F4F8FD;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 1rpx solid rgba(0, 0, 0, 0);
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
		}
	}

	.MyPortrayal_fd1_7_c1_c0_c1_c0 {
		background: #fff;
		width: 300rpx;
		height: 28rpx;
		border-radius: 14rpx;
		background-size: 100% auto;
		margin-left: 44rpx;

		.MyPortrayal_progress1_fd1_7_c1_c0_c1_c0 {
			background: linear-gradient(90deg, #6E9CFF 0%, #145EFD 100%);
			border-radius: 14rpx;
		}


	}

	.number {
		font-weight: 500;
		font-size: 20rpx;
		color: #145EFD;
		line-height: 28rpx;
		font-weight: 500;
		margin-left: 10rpx;
	}
	.all{
		text-align: center;
		width: 320rpx;
		height: 68rpx;
		line-height: 68rpx;
		background: #F4F8FD;
		border-radius: 12rpx;
	}
	.mance_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}
	.mance_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}
	
	.mance_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}
	
	.mance_fd0_0_c0 {
		width: 120rpx;
	}
	
	.mance_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
	
</style>
